﻿import React, { useState } from 'react';
import { Row, Col } from 'antd';
import { Image } from 'antd';
import ReactEcharts from 'echarts-for-react';

const testData = {
    labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul'],
    barData: [120, 132, 101, 134, 90, 230, 210],
    lineData: [220, 182, 191, 234, 290, 330, 310],
    pieData: [
      { name: 'Group A', value: 1048 },
      { name: 'Group B', value: 735 },
      { name: 'Group C', value: 580 },
      { name: 'Group D', value: 484 },
      { name: 'Group E', value: 300 },
    ],
  };

// 假设这是你的数据
const imageData = [
  { src: 'image1.jpg', alt: 'Image 1' },
  { src: 'image2.jpg', alt: 'Image 2' },
];

const videoSrc = 'video.mp4';

const barOptions = {
    color: ['#5793f3'],
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow',
      },
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true,
    },
    xAxis: {
      type: 'category',
      data: testData.labels,
      axisTick: {
        alignWithLabel: true,
      },
    },
    yAxis: {
      type: 'value',
    },
    series: [
      {
        name: '销量',
        type: 'bar',
        barWidth: '60%',
        data: testData.barData,
      },
    ],
  };
  
  const lineOptions = {
    // color: ['#5793f3'],
    tooltip: {
      trigger: 'axis',
    },
    legend: {
      data: ['销量'],
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true,
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: testData.labels,
    },
    yAxis: {
      type: 'value',
    },
    series: [
      {
        name: '人流量',
        type: 'line',
        stack: '总量',
        areaStyle: {},
        emphasis: {
          focus: 'series',
        },
        data: testData.lineData,
      },
      {
        name: '车流量',
        type: 'line',
        stack: '总量',
        areaStyle: {},
        emphasis: {
          focus: 'series',
        },
        data: testData.lineData.map((item) => item * 2),
      },
    ],
  };
  
  const pieOptions = {
    tooltip: {
      trigger: 'item',
    },
    legend: {
      orient: 'vertical',
      left: 'left',
    },
    series: [
      {
        name: '访问来源',
        type: 'pie',
        radius: '75%',
        center: ['50%', '60%'],
        data: testData.pieData,
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)',
          },
        },
      },
    ],
  };

function LiveStatsPage({
  image_base64,
  is_face_match,
  is_car_match,
  car_base64,
  
}) {
  const [detectedImg, setDetectedImg] = useState('');
  return (
    <div>
      <Row gutter={[32, 32]} >
        <Col span={6} >
          <Image width="100%" height={266} src={imageData[0].src} alt={imageData[0].alt} 
          fallback=""
          style={{
            objectFit: 'contain'
          }}
          />
        </Col>
        <Col span={12}>
          <Image width="100%" height={266} src={detectedImg} controls style={{
            objectFit: 'contain'
          }}>
          </Image>
        </Col>
        <Col span={6}>
          <Image width="100%" height={266} src={imageData[1].src} alt={imageData[1].alt} 
          fallback=""
          style={{
            objectFit: 'contain'
          }}
          />
        </Col>
        <Col span={8}>
          <ReactEcharts option={barOptions} style={{ height: '400px' }} />
        </Col>
        <Col span={8}>
          <ReactEcharts option={lineOptions} style={{ height: '400px' }} />
        </Col>
        <Col span={8}>
          <ReactEcharts option={pieOptions} style={{ height: '400px' }} />
        </Col>
      </Row>

    </div>
  );
}

export default LiveStatsPage;